@extends('admin.layouts.layout')
@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-title">
                <h5>聊天管理</h5>
            </div>
            <div class="ibox-content">
                <form class="form-horizontal " action="{{route('chatlog.index')}}" method="post"
                      enctype="multipart/form-data"
                      onReset="resetForm();return false;">
                    {!! csrf_field() !!}
                    <table class="table-striped table-bordered table-hover table-condensed">
                        <tr class="b-group">
                            <td class="b-child" colspan="2">
                                <table class="table-striped table-bordered table-hover table-condensed">
                                    <tr class="b-group">
                                        <td>
                                            @include('widget.between_datetime',['showEndTime'=>true])
                                        </td>
                                        <td>
                                            @include('widget.query_and_refresh')
                                        </td>
                                        <td class="form-inline">
                                            <label class="control-label">滚屏</label>
                                            <input id="ckbScroll" type="checkbox" class="js-switch"
                                            <?php if (app('request')->input('page') > 1) {
                                                echo 'disabled="disabled"';
                                            } ?> />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <td class="b-child" colspan="2">
                                <table class="table-striped table-bordered table-hover table-condensed">
                                    <tr class="b-group">
                                        <td class="form-inline">
                                            <label class="control-label"><a href="javascript:;"
                                                                            data-toggle="tooltip"
                                                                            data-placement="top"
                                                                            title="精确查询">角色ID</a></label>
                                            <div class="input-daterange input-group">
                                                <input autocomplete="off" type="text" class="input-sm form-control"
                                                       name="uid"
                                                       value="{{app('request')->input('uid')}}"/>
                                            </div>
                                            @if ($errors->has('uid'))
                                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>{{$errors->first('uid')}}</span>
                                            @endif
                                        </td>
                                        <td class="form-inline">
                                            <label class="control-label"><a href="javascript:;"
                                                                            data-toggle="tooltip"
                                                                            data-placement="top"
                                                                            title="模糊查询">角色昵称</a></label>
                                            <div class="input-daterange input-group">
                                                <input autocomplete="off" type="text" class="input-sm form-control"
                                                       name="nickname"
                                                       value="{{app('request')->input('nickname')}}"/>
                                            </div>
                                            @if ($errors->has('nickname'))
                                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>{{$errors->first('nickname')}}</span>
                                            @endif
                                        </td>
                                        <td class="form-inline">
                                            <label class="control-label"><a href="javascript:;"
                                                                            data-toggle="tooltip"
                                                                            data-placement="top" title="模糊查询">聊天内容</a></label>
                                            <div class="input-daterange input-group">
                                                <input autocomplete="off" type="text" class="input-sm form-control"
                                                       name="content"
                                                       value="{{app('request')->input('content')}}"/>
                                            </div>
                                            @if ($errors->has('content'))
                                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>{{$errors->first('content')}}</span>
                                            @endif
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>

                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;
                                    <input type="checkbox" checked="checked" value=""
                                           onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:6.5rem;overflow-y:scroll;">
                                    @include('widget.channel')
                                </div>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;
                                    <input type="checkbox" checked="checked" value="" onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:10rem;overflow-y:scroll;">
                                    @include('widget.server')
                                </div>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;
                                    <input type="checkbox" checked="checked" value="" onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:10rem;overflow-y:scroll;">
                                    @include('widget.chat')
                                </div>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" name="page_size" value="{{$reqPageSize}}"/>
                </form>
                <table class="table table-striped table-bordered table-hover m-t-md tblData">
                    <thead>
                    <tr>
                        <th class="text-center">渠道</th>
                        <th class="text-center">时间</th>
                        <th class="text-center">角色昵称</th>
                        <th class="text-center">角色ID</th>
                        <th class="text-center">私聊对象名</th>

                        <th class="text-center">区服</th>
                        <th class="text-center">聊天频道</th>
                        <th class="text-center">聊天内容</th>
                    </tr>
                    </thead>
                    <tbody class="text-center" id="tbContainer">
                    @foreach($data as $key => $item)
                        <tr data-object-id="{{(string)$item['_id']}}">
                            <td>{{$item['channel_name']}}</td>
                            <td style="width: 16rem;">{{$item['op_time']}}</td>
                            <td>{{$item['nickname']}}</td>
                            <td>{{$item['uid']}}</td>
                            <td>{{$item['to_nickname']}}</td>

                            <td>{{$item['server_name']}}</td>
                            <td>{{$item['chat_channel_name']}}</td>
                            <td style="max-width: 90rem">{{$item['content']}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                <div class="pull-left pagination m-t-no">
                    @include('widget.page',['reqPageSize'=>$reqPageSize])
                </div>
                <div class="pull-right pagination m-t-no">
                    <div class="text-center">
                        <?php
                        if (count($data) > 0) {
                            echo $data->appends([
                                'start_time' => $reqStartTime,
                                'end_time' => $reqEndTime,
                                'channel_id' => $str_arr_channels_id,
                                'unique_id' => $str_arr_unique_id,
                                'chat_channel_id' => $str_arr_chat_channel_id,
                                'nickname' => app('request')->input('nickname'),
                                'content' => app('request')->input('content'),
                                'uid' => app('request')->input('uid'),
                                'page_size' => app('request')->input('page_size'),
                            ])->links();
                        }
                        ?>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <script>
    </script>
    <link href="{{loadEdition('/admin/css/plugins/datapicker/bootstrap-datepicker.css')}}" rel="stylesheet">
    <link href="{{loadEdition('/admin/css/plugins/switchery/switchery.css')}}" rel="stylesheet">
@endsection
@section('js')
    <script src="{{loadEdition('/admin/js/plugins/datapicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{loadEdition('/admin/js/plugins/datapicker/bootstrap-datepicker.zh-CN.js')}}"></script>
    <script src="{{loadEdition('/admin/js/plugins/switchery/switchery.js')}}"></script>
    <script src="{{loadEdition('/js/global.js')}}"></script>
    <script>
        //滚屏的checkbox框
        var elem = document.querySelector('.js-switch');
        var switchery = new Switchery(elem, {
            color: '#1AB394'
        });

        var event;
        $('#ckbScroll').change(function () {
            if (this.checked) {
                //滚动开始后,某些html不可用
                $('input[type="checkbox"]').slice(1).attr("disabled", true);
                $('input[name="uid"]').attr("disabled", true);
                $('input[name="nickname"]').attr("disabled", true);
                $('input[name="content"]').attr("disabled", true);

                event = setInterval(autoLoad, 10 * 1000);
                return false;
            } else {
                $('input[type="checkbox"]').slice(1).removeAttr("disabled");
                $('input[name="uid"]').attr("disabled", false);
                $('input[name="nickname"]').attr("disabled", false);
                $('input[name="content"]').attr("disabled", false);

                clearInterval(event);
            }
        });

        //自动载入最新的聊天记录
        function autoLoad() {
            object_id = $('#tbContainer tr').first().attr('data-object-id');

            $.ajax({
                method: "POST",
                url: "{{route('chatlog.index')}}",
                data: $('form').serialize() + '&scroll=1&object_id=' + object_id,
            }).done(function (obj) {
                if (obj.data.length <= 0) {
                    return false;
                }

                //显示新的html
                var html = '';
                $.each(obj.data, function (key, value) {
                    html += '<tr data-object-id="' + value._id + '"> ' +
                        '<td>' + value.channel_name + '</td> ' +
                        '<td>' + value.op_time + '</td> ' +
                        '<td>' + value.nickname + '</td> ' +
                        '<td>' + value.uid + '</td> ' +
                        '<td>' + value.to_nickname + '</td> ' +
                        '<td>' + value.server_name + '</td> ' +
                        '<td>' + value.chat_channel_name + '</td> ' +
                        '<td style="max-width: 90rem">' + value.content + '</td> ' +
                        '</tr>';
                });
                $(html).hide().prependTo('#tbContainer').show('slow');

                //删除老的tr
                $page_size = obj.per_page;
                $tr_length = $('#tbContainer tr').length;
                $slice = ($tr_length - $page_size * 2);
                if ($slice > 0) {
                    $('#tbContainer tr').slice(-$slice).remove();
                }
            });
        }

        function resetForm() {
            window.location.href = '{{URL::full()}}';
        }
    </script>
@stop